<template>
  <div>
    <!-- 获取到的信息 -->
    <div class="goodsInfo-img">
      <mt-swipe :auto="0" :show-indicators="false" @change="handleChange" :speed="100">
        <mt-swipe-item :class="spanIndex == 0 ? 'is-active' : ''">
          <img :src="goodsInfoData.pic" width="100%" height="100%">
        </mt-swipe-item>
        <mt-swipe-item :class="spanIndex == 1 ? 'is-active' : ''">
          <video height="100%" width="100%" :poster="goodsInfoData.pic"></video>
        </mt-swipe-item>
      </mt-swipe>
      <div class="goodsInfo-img-icon">
        <p>
          <a>
            <span class="iconfont" @click="$router.go(-1)">&#xe662;</span>
          </a>
        </p>
        <p>
          <a>
            <router-link to="/home/goods/shopcar" tag="span" class="iconfont" id="shopcar">&#xe710;<sup>{{this.$store.getters.getAllCount}}</sup></router-link>
          </a>
          <a>
            <span class="iconfont">&#xe6ad;</span>
          </a>
        </p>
      </div>
      <div class="goodsInfo-gotaobao">
        <p>
          <a @click="gotaobao(goodsInfoData.goods_url)">
            <span class="iconfont">&#xe6d3;</span>
          </a>
          详情
        </p>
      </div>
      <div class="goodsInfo-span">
        <a :class="spanIndex == 0 ? 'goodsInfo-span-active' : '' " @click="handleChange(0)">
          <span class="iconfont">&#xe667;</span>视频
        </a>
        <a :class="spanIndex == 1 ? 'goodsInfo-span-active' : '' " @click="handleChange(1)">图片</a>
      </div>
    </div>
    <!-- 商品标题价格 -->
    <div class="goodsInfo-text-box">
      <div class="goodsInfo-content">
        <div class="goodsInfo-text-sale">
          <h2>
            <span>￥</span>
            {{goodsInfoData.price_after_coupons}}
            <a>#{{goodsInfoData.cate_name}}</a>
          </h2>
          <p>
            售价
            <del>￥{{goodsInfoData.price}}</del>
          </p>
        </div>
        <div class="goodsInfo-text-title">
          <h2>
            <span v-if="goodsInfoData.tmall==1?true:false">
              <img src="../../img/tianmao.png" height="80%">
            </span>
            {{goodsInfoData.goods_name}}
          </h2>
        </div>
        <div :class="['goodsInfo-text-juan',{'goodsInfo-after-juan': linquafter} ]">
          <div class="goodsInfo-text-juan-left">
            <h1>
              <span>￥</span>
              {{goodsInfoData.rate}}
            </h1>
          </div>
          <div class="goodsInfo-text-juan-right">
            <button
              @click="getjuan"
              v-clipboard:copy="quanlink"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              v-if="quantext"
            >复制淘口令</button>
            <button v-else @click="getjuanafter">已复制</button>
            <p>
              <span>目前剩余：</span>
              {{shengyu}}
            </p>
          </div>
          <a></a>
          <a></a>
        </div>
        <div class="goodsInfo-text-tuijian">
          <p>
            <span>推荐</span>
            {{goodsInfoData.quan_guid_content}}
          </p>
        </div>
      </div>
    </div>
    <div class="goodsInfo-bottom-box">
      <div class="goodsInfo-bottom">
        <ul>
          <li>
            <dl>
              <dt>
                <span class="iconfont">&#xe713;</span>
              </dt>
              <dd>店铺</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>
                <span class="iconfont">&#xe68b;</span>
              </dt>
              <dd>分享</dd>
            </dl>
          </li>
          <li>
            <dl>
              <dt>
                <span class="iconfont">&#xe717;</span>
              </dt>
              <dd>客服</dd>
            </dl>
          </li>
        </ul>
        <ul>
          <p @click="popupcontrle">加入购物车</p>
          <p>下单购买</p>
        </ul>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="bottom">
      <!-- 购物车 -->
      <div class="gouwuce-box">
        <div class="gouwuce">
          <div class="gouwuce-header">
            <div class="gouwuce-header-img">
              <img :src="goodsInfoData.pic" width="100%">
                <transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
                <div class="ball" v-if="ballfalg" id="ball"></div>
              </transition>
            </div>
            <div class="gouwuce-header-text">
              <dl>
                <dt>￥{{goodsInfoData.price_after_coupons}}</dt>
                <dd>库存：{{goodsInfoData.quan_shengyu}}</dd>
                <dd>
                  <p v-if="showZC">请选择：种类 尺码</p>
                  <P v-else>
                    已选：
                    <a class="showZC_color">{{ tiaoxuan.zhonglei }}</a>
                    <a class="showZC_color">{{ tiaoxuan.chima }}</a>
                  </P>
                </dd>
              </dl>
            </div>
            <div class="gouwuce-header-button">
              <span class="iconfont">&#xe6a7;</span>
            </div>
          </div>
          <div class="gouwuce-zhonglei">
            <ul>
              <li>颜色种类</li>
              <li>
                <button
                  v-for="(item,index) in Zbtnlist"
                  :key="index"
                  @click="xuanzhongZ(index)"
                  :class="Zactive === index?'button-active':'' "
                >{{item}}</button>
              </li>
            </ul>
          </div>
          <div class="gouwuce-zhonglei">
            <ul>
              <li>尺码选择</li>
              <li>
                <button
                  v-for="(item,index) in Cbtnlist"
                  :key="index"
                  @click="xuanzhongC(index)"
                  :class="Cactive === index?'button-active':'' "
                >{{item}}</button>
              </li>
            </ul>
          </div>
          <div class="gouwuce-shuliang">
            <span>购买数量</span>
            <span>
              <number @getcount="getSelectedCount" :max='goodsInfoData.quan_shengyu'></number>
            </span>
          </div>
          <div class="gouwuce-queren">
             <button class="queren_button" v-if="showZC">确认</button>
             <button @click="addToShopCar" v-else>确认</button>
          </div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { Popup } from "mint-ui";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import number from "./goodsInfo_number";
export default {
  data() {
    return {
      spanIndex: 0,
      id: this.$route.params.id,
      goodsInfoData: "",
      quanlink: "",
      linquafter: false,
      quantext: true,
      shengyu: "",
      popupVisible: false,
      btnAct: false,
      Zbtnlist: ["种类1", "种类2", "种类3", "种类4567", "种类5", "种类7"],
      Cbtnlist: ["S", "M", "L", "XL", "XXL", "XXXL"],
      Zactive: "",
      Cactive: "",
      tiaoxuan: { zhonglei: "", chima: "" },
      ballfalg: false,
      selectedCount: 1
    };
  },
  methods: {
    handleChange(index) {
      this.spanIndex = index;
    },
    getGoodsInfo: function() {
      this.axios
        .get(
          "/goods/getGoodInfo?appkey=0df6290cb148cace89f7df5064fc105e&id=" +
            this.id
        )
        .then(response => {
          if ((response.status = 200)) this.goodsInfoData = response.data.data;

          this.shengyu = this.goodsInfoData.quan_shengyu;
          this.quanlink = this.goodsInfoData.quan_link;
          this.axios
            .get(
              //处理链接生成淘口令
              "/koulin/tkl/Tbktbtaokouling?apikey=zbvWEjQVkE&url=" +
                this.goodsInfoData.quan_link +
                "&text=" +
                this.goodsInfoData.goods_name +
                "&pic=" +
                this.goodsInfoData.pic
            )
            .then(response => {
              if (response.status == 200) {
                // this.quanlink = response.data.tkl;
                // console.log(this.quanlink);
              } else {
                this.quanlink = "";
              }
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getjuan: function() {
      Toast({
        message: "获取中...",
        position: "center",
        duration: 500
      });
    },
    onCopy: function() {
      if (this.shengyu == 0) {
        setTimeout(() => {
          this.shengyu = this.shengyu;
          Toast({
            message: "已复制",
            duration: 800
          });
        }, 500);
      } else {
        setTimeout(() => {
          this.linquafter = true;
          this.quantext = false;
          this.shengyu = this.shengyu - 1;
          Toast({
            message: "复制成功",
            duration: 800
          });
        }, 500);
      }
    },
    onError: function() {
      Indicator.open({
        text: "网络延迟",
        spinnerType: "fading-circle"
      });
      setTimeout(() => {
        Indicator.close();
      }, 500);
    },
    getjuanafter: function() {
      Toast({
        message: "已复制",
        duration: 500
      });
    },
    gotaobao: function(url) {
      window.location.href = url;
    },
    popupcontrle: function() {
      this.popupVisible = !this.popupVisible;
    },
    xuanzhongZ: function(i) {
      if (this.Zactive === i) {
        this.Zactive = -1;
        this.tiaoxuan.zhonglei = "";
      } else {
        this.Zactive = i;
        var Zbox = this.Zbtnlist[i];
        this.tiaoxuan.zhonglei = Zbox;
      }
    },
    xuanzhongC: function(i) {
      if (this.Cactive === i) {
        this.Cactive = -1;
        this.tiaoxuan.chima = "";
      } else {
        this.Cactive = i;
        var Cbox = this.Cbtnlist[i];
        this.tiaoxuan.chima = Cbox;
      }
    },
    addToShopCar: function() {
      //添加购物车
      this.ballfalg = !this.ballfalg;
      //购买物品信息
       var goodsInfo = {
         goods_name:this.goodsInfoData.goods_name,
         goods_pic:this.goodsInfoData.pic,
         goods_jiage:this.goodsInfoData.price_after_coupons,
         goods_juanlink:this.goodsInfoData.quan_link,
         goods_count:this.selectedCount,
         selected:false,
         goods_zhonglei:this.tiaoxuan,
         goods_leimu:this.goodsInfoData.cate_name,
         goods_shenyu:this.goodsInfoData.quan_shengyu
       }
      
      // 调用store中mutation 加入
      this.$store.commit('addTopCar',goodsInfo)
    
    },
    beforeEnter: function(el) {
      el.style.transform = "translate(0,0)";
    },
    Enter: function(el, done) {
      const ballposition = document.getElementById('ball').getBoundingClientRect();
      const carposition = document
        .getElementById("shopcar")
        .getBoundingClientRect();

      const xDist = carposition.left - ballposition.left;
      const yDist = carposition.top - ballposition.top;

      el.offsetWidth;
      el.style.transform = `translate(${xDist}px  ,${yDist}px)`;
      el.style.transition = "all .5s ease-out";
      done();
    },
    afterEnter: function(el) {
      this.ballfalg = !this.ballfalg;
    },
    getSelectedCount(count) {
      this.selectedCount = count;
    },

  },
  mounted() {
    this.getGoodsInfo();
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  },
  computed: {
    showZC: function() {
      var zhuangtai = "";
      if (this.tiaoxuan.zhonglei == "" || this.tiaoxuan.chima == "") {
          zhuangtai = true;
      } else {
        zhuangtai = false;
      }
      return zhuangtai;
    }
  },
  components: {
    number
  }
};
</script>
<style lang="scss" scoped>
.goodsInfo-gotaobao p {
  width: 100%;
  height: 100% !important;
  display: flex;
  align-content: center;
  align-items: center;
  font-size: 14px;
  color: #1e1e1e;
}
.goodsInfo-img {
  width: 100%;
  height: 400px;
  position: relative;

  .goodsInfo-gotaobao {
    width: 100px;
    height: 38px;
    border-radius: 50px;
    position: absolute;
    z-index: 101;
    top: 25%;
    right: -25px;
    background: #fff;
    box-shadow: 1px 1px 5px rgba($color: #000000, $alpha: 0.3);
    display: flex;

    a {
      background: #f73302;
      width: 25px;
      height: 25px;
      display: block;
      display: flex;
      justify-content: center;
      align-content: center;
      border-radius: 50%;
      line-height: 25px;
      margin: 0 5px;
      transition: all 0.4s;
      span {
        color: #fff;
        font-size: 19px;
      }
    }
  }
}
.goodsInfo-img-icon {
  width: 90%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  z-index: 200;
  top: 5%;
  left: 5%;
  p {
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    &:nth-child(1) {
      a {
        span {
          font-size: 23px !important;
        }
      }
    }
    &:nth-child(2) {
      display: flex;
      justify-content: flex-end;
    }
    a {
      border-radius: 50px;
      width: 30px;
      height: 30px;
      background: rgba($color: #000000, $alpha: 0.4);
      color: #000000;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
      margin-right: 10px;
      span {
        font-size: 18px;
        color: #fff;
        position: relative;
        sup{
          background: #fb0303f0;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          color: #fff;
          position: absolute;
          top: -10px;
          right: -10px;
          text-align: center;
          line-height: 18px;
        }
      }
    }
  }
}
.goodsInfo-span {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 10%;
  a {
    display: flex;
    width: 65px;
    height: 25px;
    font-size: 12px;
    color: #010101;
    text-align: center;
    padding: 3px 0px;
    background: rgba($color: rgb(216, 216, 216), $alpha: 0.5);
    justify-content: center;
    align-content: center;
    border-radius: 15px;
    margin-right: 10px;
    transition: all 0.3s;
    span {
      font-size: 18px !important;
      color: #010101;
      margin-right: 3px;
      transition: all 0.2s;
    }
  }
}
.goodsInfo-span-active {
  background: linear-gradient(left, #faaa32, #fa2835) !important;
  color: #fff !important;
  span {
    color: #fff !important;
  }
}
.goodsInfo-text-box {
  width: 100%;
  background: #fff;
  .goodsInfo-content {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 40px;
    .goodsInfo-text-sale {
      color: #ff7300;
      padding: 5px 0;
      h2 {
        margin: 0;
        font-size: 24px !important;
        display: flex;
        align-items: center;
        span {
          font-size: 18px;
          font-weight: normal;
        }
        a {
          color: #fff;
          background: linear-gradient(left, #f88b0e, #fa5928) !important;
          padding: 3px 4px;
          border-radius: 2px;
          font-size: 10px;
          margin-left: 10px;
        }
      }
      p {
        font-size: 12px;
        color: #999999;
        margin: 0;
      }
    }
    .goodsInfo-text-title {
      h2 {
        font-size: 16px;
        color: #1e1e1e;
        line-height: 1.3em;
        margin: 0;
        span {
          display: inline-block;
          width: 50px;
          height: 15px;
          line-height: 15px;
          border-radius: 0px;
          text-align: center;
          background: #fc3434;
          margin-right: 10px;
          border-radius: 20px;
        }
      }
    }

    .goodsInfo-text-juan {
      width: 100%;
      height: 100px;
      margin: 20px auto;
      border-radius: 10px;
      background: linear-gradient(left, #fb0303f0, #fa1808) ;
      position: relative;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: space-between;
      overflow: hidden;
      .goodsInfo-text-juan-left {
        width: 60%;
        h1 {
          width: 80%;
          margin: 0 auto;
          text-align: center;
          line-height: 45px;
          color: #fff;
          font-size: 45px;
          font-family: "Times New Roman", Times, serif;
          span {
            font-size: 26px;
            font-family: "微软雅黑" !important;
          }
        }
      }
      .goodsInfo-text-juan-right {
        border-left: 3px dashed #fff;
        width: 40%;
        button {
          width: 100%;
          margin: 18px auto;
          text-align: center;
          font-size: 20px;
          color: #fff;
          background: none;
          border: none;
          outline: none;
          margin: 0;
          padding: 0;
          font-weight: bold;
        }
        p {
          text-align: center;
          font-size: 12px;
          margin-top: 5px;
          color: #f6f6f6;
        }
      }

      a:nth-of-type(1) {
        display: block;
        background: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        left: -14px;
        top: 34px;
      }
      a:nth-of-type(2) {
        display: block;
        background: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        right: -14px;
        top: 34px;
      }
    }
    .goodsInfo-text-tuijian {
      padding: 5px 0;
      span {
        font-size: 12px;
        color: rgb(253, 82, 82);
        border: rgb(253, 82, 82) 1px solid;
        border-radius: 20px;
        padding: 2px 9px;
      }
    }
  }
}
.goodsInfo-bottom-box {
  width: 100%;
  background: #fff;
  height: 50px;
  box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.2);
  z-index: 300;
  position: fixed;
  bottom: 0;
  padding: 5px;

  .goodsInfo-bottom {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    ul {
      border-radius: 50px;
      overflow: hidden;
      &:nth-child(1) {
        display: flex;
        justify-content: flex-start;
        align-content: center;
        width: 40%;
        li {
          display: flex;
          justify-content: center;
          align-content: center;
          align-items: center;
          width: 33%;
          color: rgb(100, 100, 100);
          text-align: center;
          dl {
            dt {
              margin-bottom: -3px !important;
              span {
                font-size: 26px;
              }
            }
            dd {
              font-size: 12px;
            }
          }
        }
      }
      &:nth-child(2) {
        width: 60%;
        display: flex;
        justify-content: flex-start;
        align-content: center;
        height: 100%;

        p {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 50%;
          color: #fff;

          margin: 0;
          &:nth-child(1) {
            background: linear-gradient(left, #f6c944, #f09c38);
          }
          &:nth-child(2) {
            background: #fd424c;
          }
        }
      }
    }
  }
}
.goodsInfo-after-juan {
  background: #cccccc !important;
  .goodsInfo-text-juan-left {
    h1 {
      color: #f5f5f5 !important;
    }
  }
  .goodsInfo-text-juan-right {
    border-left: 3px dashed rgb(216, 216, 216) !important;
    h1 {
      color: #f5f5f5 !important;
    }
    p {
      color: #f5f5f5 !important;
    }
  }
}
.mint-popup-bottom {
  width: 100%;
  padding-bottom: 30%;
}
.gouwuce-box {
  width: 100%;

  .gouwuce {
    width: 94%;
    margin: 0 auto;
  }
  .gouwuce-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c4c4c4;

    .gouwuce-header-img {
      width: 25%;
      height: 95px;
      border: 1px solid #ccc;
      background: #fff;
      display: flex;
      justify-content: center;
      align-content: center;
      border-radius: 5px;
      position: relative;
      top: -20px;
    }
    .gouwuce-header-text {
      width: 60%;
      dl {
        margin-top: 5px !important;
        dt {
          color: #fb0303f0;
          font-size: 14px;
        }
        dd {
          color: #383838f0;
          font-size: 14px;
        }
      }
    }
    .gouwuce-header-button {
      width: 10%;
      display: flex;
      justify-content: center;
      span {
        margin-top: 5px !important;
        font-size: 22px;
      }
    }
  }
  .gouwuce-zhonglei {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dddddd;
    ul {
      li {
        margin-top: 5px;
        &:nth-child(1) {
          font-size: 12px;
          color: #999;
        }
        &:nth-child(2) {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          button {
            background: #f2f2f2;
            border: none;
            border-radius: 8px;
            color: #666;
            margin-top: 10px;
            margin-right: 10px;
            font-size: 14px;
          }
        }
      }
    }
  }
}
.gouwuce-shuliang {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #dddddd;
  padding: 15px 0;
  span {
    color: #999;
    font-size: 12px;
  }
}
.gouwuce-queren {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  button {
    width: 100%;
    border: none;
    background: #fb0303f0;
    color: #fff;
    padding: 10px 0;
    font-size: 16px;
  }
}
.button-active {
  background: #fb0303f0 !important;
  color: #fff !important;
}
.showZC_color {
  color: #fb7b03f0;
  border: 1px solid #fb7b03f0;
  font-size: 12px;
  border-radius: 2px;
  padding: 3px 5px;
}

.ball {
  width: 20px;
  height: 20px;
  background: #fb0303f0;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  left: 80px;
}

  .queren_button {
    width: 100%;
    border: none;
    background: #fd9e9ef0 !important;
    color: rgb(240, 240, 240);
    padding: 10px 0;
    font-size: 16px;
  }

</style>
